<template>
  <div>
    <div class="bts">
      <a href="#" class="myButton" @click="GoAll">所有机构</a>
      <a href="#" class="myButton" @click="GoA">高校院所</a>
      <a href="#" class="myButton" @click="GoB">中试基地</a>
      <a href="#" class="myButton" @click="GoC">转移机构</a>
      <a href="#" class="myButton" @click="GoD">中介机构</a>
      <a href="#" class="myButton" @click="GoE">企业</a>
    </div>
    <div v-if="ShowAll">
      <industry-tp :dataList="[dataList[0],1]" v-if="dataList[0]"><template slot="tittle">高校院所</template></industry-tp>
      <industry-tp :dataList="[dataList[1],2]" v-if="dataList[1]"><template slot="tittle">中试基地</template></industry-tp>
      <industry-tp :dataList="[dataList[2],3]" v-if="dataList[2]"><template slot="tittle">转移机构</template></industry-tp>
      <industry-tp :dataList="[dataList[3],4]" v-if="dataList[3]"><template slot="tittle">中介机构</template></industry-tp>
      <industry-tp :dataList="[dataList[4],5]" v-if="dataList[4]"><template slot="tittle">企业</template></industry-tp>
    </div>
    <div v-if="ShowA"><industry-tp :dataList="dataList[0]" v-if="dataList[0]"><template slot="tittle">高校院所</template></industry-tp></div>
    <div v-if="ShowB"><industry-tp :dataList="dataList[1]" v-if="dataList[1]"><template slot="tittle">中试基地</template></industry-tp></div>
    <div v-if="ShowC"><industry-tp :dataList="dataList[2]" v-if="dataList[2]"><template slot="tittle">转移机构</template></industry-tp></div>
    <div v-if="ShowD"><industry-tp :dataList="dataList[3]" v-if="dataList[3]"><template slot="tittle">中介机构</template></industry-tp></div>
    <div v-if="ShowE"><industry-tp :dataList="dataList[4]" v-if="dataList[4]"><template slot="tittle">企业</template></industry-tp></div>
  </div>
</template>
 
<script>
import IndustryTp from './CommonTemplates/IndustryTp.vue'

export default {
  name: 'HomePage',
  components: {
    IndustryTp,
  },
  data () {
    return {
      ShowAll: true,
      ShowA: false,
      ShowB: false,
      ShowC: false,
      ShowD: false,
      ShowE: false,
      orgtypeList: ['高校院所','中试基地','转移机构','中介机构','企业'],

      dataList: [],
    }
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      for(let index in this.orgtypeList){
        let params={
          currentPage: 1,
          pageSize: 4,
          orgtype: this.orgtypeList[index],
        }
        this.api.getorganization(params).then(res => {
          if(['200', 200].includes(res.code) && res.success == true) {
            this.dataList.push(res.data);
          }
          else {
              this.$message({
                  type: "info",
                  message: message
              })
          }
        }).catch(err => {
            this.$message({
                type: "info",
                message: err
            })
        })
      }
    },
    GoAll(){
      this.ShowAll = true;
      this.ShowA = false;
      this.ShowB = false;
      this.ShowC = false;
      this.ShowD = false;
      this.ShowE = false;
    },
    GoA(){
      this.ShowAll = false;
      this.ShowA = true;
      this.ShowB = false;
      this.ShowC = false;
      this.ShowD = false;
      this.ShowE = false;
    },
    GoB(){
      this.ShowAll = false;
      this.ShowA = false;
      this.ShowB = true;
      this.ShowC = false;
      this.ShowD = false;
      this.ShowE = false;
    },
    GoC(){
      this.ShowAll = false;
      this.ShowA = false;
      this.ShowB = false;
      this.ShowC = true;
      this.ShowD = false;
      this.ShowE = false;
    },
    GoD(){
      this.ShowAll = false;
      this.ShowA = false;
      this.ShowB = false;
      this.ShowC = false;
      this.ShowD = true;
      this.ShowE = false;
    },
    GoE(){
      this.ShowAll = false;
      this.ShowA = false;
      this.ShowB = false;
      this.ShowC = false;
      this.ShowD = false;
      this.ShowE = true;
    }
  }
}
</script>

<style scoped>
.myButton {
	box-shadow: 0px 10px 14px -7px #5de1f5;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:15px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
  margin: 16px 26px;
}
.myButton:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}

.bts{
  padding: 30px;
}
        
</style>
